<!--报送单 AuditForm-->
<template>
  <Layout>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row v-show="!switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="企业名称：" prop="order">
            <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                          :currentOrgId="dataToQuery.companyId"
                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="年度：" prop="year">
            <DatePicker class="query-form-el" type="year" placeholder="请选择年度"
                        v-model="dataToQuery.yearDate"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="企业名称：" prop="belongOrgId">
            <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                          :currentOrgId="dataToQuery.companyId"
                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="年度：" prop="year">
            <DatePicker class="query-form-el" type="year" placeholder="请选择年度"
                        v-model="dataToQuery.yearDate"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="审核类别：" prop="content">
            <Select class="query-form-el" placeholder="请选择审核类别" type='text' v-model='dataToQuery.auditTypeArrays'
                    multiple>
              <Option v-for="item in dictMap['PRD-000001']" :value="item.codingCodeId" :key="item.codingCodeId">
                {{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label='审核机构名称：' prop='auditOrg'>
            <Input v-model='dataToQuery.auditOrg' class="query-form-el"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="填表时间：" prop="content">
            <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange"
                        placement="bottom-end" placeholder="请选择查询时间段"
                        @on-change="onSelectQueryDateRange"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="综合考评汇总表：" prop="content">
            <Select class="query-form-el" placeholder="请选择" type='text' v-model='dataToQuery.ifSummary'>
              <Option value="1" >未填报</Option>
              <Option value="2" >已填报</Option>
            </Select>
          </FormItem>
        </Col>

      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8" offset="16">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <download-button :api="exportUrl" :queryForm="dataToQuery" />
          <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button>   -->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :title="getModalTitle('清洁生产审核工作信息报送单')" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"
           :width=800 :styles="{height:'700px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='企业名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName"
                                :orgTree="true" :currentOrgId="dataToView.companyId"
                                :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='月份：' prop='rptPeroid'>
                  <div v-if="mode === 'view'">{{ dataToView.rptPeroid.substr(0, 7) }}</div>
                  <DatePicker v-else class="w" type="month" placeholder="请选择月份"
                              v-model="dataToView.rptPeroid"></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='审核类别：' prop='auditType'>
                  <div v-if="mode === 'view'">{{ this.dictMap['PRD-000001'][dataToView.auditType].codingName }}</div>
                  <Select v-else class='' placeholder="请选择审核类别" type='text' v-model='dataToView.auditType'>
                    <Option v-for="item in dictMap['PRD-000001']" :value="item.codingCodeId" :key="item.codingCodeId">
                      {{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='审核咨询机构名称：' prop='auditOrg'>
                  <div v-if="mode === 'view'" class="break-all">{{ dataToView.auditOrg }}</div>
                  <Input v-else v-model='dataToView.auditOrg' class="query-form-el"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='咨询费用（万元）：' prop='consultingFees'>
                  <div v-if="mode === 'view'">{{ dataToView.consultingFees }}</div>
                  <InputNumber v-else class="query-form-el" v-model='dataToView.consultingFees' :min="0"></InputNumber>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='审核启动时间：' prop='auditStartTime'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.auditStartTime) }}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el"
                              v-model='dataToView.auditStartTime' :options="options" editable='false'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='提交时间：' prop='submitTime'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.submitTime) }}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el"
                              v-model='dataToView.submitTime' :options="options" editable='false'></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='完成评审时间：' prop='auditFinishTime'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.auditFinishTime) }}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el"
                              v-model='dataToView.auditFinishTime' :options="options" editable='false'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='主管负责人：' prop='charger'>
                  <div v-if="mode === 'view'">{{ dataToView.charger }}</div>
                  <Input v-else type='text' v-model='dataToView.charger'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='手机：' prop='phone'>
                  <div v-if="mode === 'view'">{{ dataToView.phone }}</div>
                  <Input v-else type='text' v-model='dataToView.phone'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='邮箱：' prop='email'>
                  <div v-if="mode === 'view'">{{ dataToView.email }}</div>
                  <Input v-else type='text' v-model='dataToView.email'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='登记人：' prop='registrant'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='登记人电话：' prop='creatorPhone'>
                  <div v-if="mode === 'view'">{{ dataToView.creatorPhone }}</div>
                  <Input v-else type='text' v-model='dataToView.creatorPhone'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填表时间：' prop='registTime'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el"
                              v-model='dataToView.createDate' readonly></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='完成情况：' prop='status'>
                  <div v-if="mode === 'view'">{{ this.statusMap[dataToView.status] }}</div>
                  <Select v-else class='' placeholder="请选择完成情况" type='text' v-model='dataToView.status'>
                    <Option v-for="item in status" :value="item.value" :key="item.value">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="11"></Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='存在问题：' prop='questions'>
                  <div v-if="mode === 'view'" class="break-all">{{ dataToView.questions }}</div>
                  <Input v-else class='' placeholder="请填写存在问题" type='textarea' v-model='dataToView.questions'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='有关事项说明：' prop='otherRemark'>
                  <div v-if="mode === 'view'" class="break-all">{{ dataToView.otherRemark }}</div>
                  <Input v-else class='' placeholder="请填写有关事项说明" type='textarea'
                         v-model='dataToView.otherRemark'></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  name: "auditForm",
  components: {
    cascaderDom
  },
  data() {
    return {
      ...this.createCommonDataField(),
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '企业名称', fixed: 'left', align: 'center', minWidth: 200},
        {
          key: 'ifSummary',
          title: '综合考评汇总表',
          fixed: 'left',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            let color = 'red';
            if (params.row.ifSummary == '2') {
              color = 'green';
            }
            return h('span',{
              style: {
                color: color
              }
            }, params.row.ifSummary == '2'?'已填报':'未填报')
          }
        },
        {
          title: '月份', width: 150, fixed: 'left', align: 'center', key: 'rptPeroid', render: (h, params) => {
            return h('span', params.row.rptPeroid.substr(0, 7))
          }
        },
        {
          key: 'auditType', title: '审核类别', align: 'center', minWidth: 130, render: (h, params) => {
            return h('span', (this.dictMap['PRD-000001'] && this.dictMap['PRD-000001'][params.row.auditType].codingName))
          },
        },
        {
          key: 'status', title: '完成情况', align: 'center', minWidth: 130, render: (h, params) => {
            return h('span', (this.statusMap[params.row.status]))
          },
        },
        {key: 'auditOrg', title: '审核咨询机构名称', align: 'center', minWidth: 200},
        {key: 'consultingFees', title: '咨询费用（万元）', align: 'center', minWidth: 140},
        {key: 'auditStartTime', title: '审核启动时间', align: 'center', minWidth: 120, render: this.renderCellDate},
        {key: 'submitTime', title: '提交时间', align: 'center', minWidth: 120, render: this.renderCellDate},
        {key: 'auditFinishTime', title: '完成评审时间', align: 'center', minWidth: 120, render: this.renderCellDate},
        {key: 'charger', title: '主管负责人', align: 'center', minWidth: 120},
        {key: 'phone', title: '手机', align: 'center', minWidth: 140},
        {key: 'email', title: '邮箱', align: 'center', minWidth: 140},
        {key: 'createUserName', title: '填表人', align: 'center', width: 140},
        {key: 'creatorPhone', title: '填表人联系电话', align: 'center', width: 140},
        {key: 'createDate', title: '填表时间', align: 'center', width: 120, render: this.renderCellDate},
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 160,
          align: 'center',
          render: (h, params) => {
            if (this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId ||
                    this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ||
                    this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined) {
              if (params.row.status != '5') {
                return h('div', [
                  h('A', {
                    props: {type: 'primary', size: 'small'},
                    style: {fontSize: '14px',},
                    on: {
                      click: () => {
                        this.viewData(params);
                      }
                    }
                  }, '详情'),
                  h('Divider', {props: {type: 'vertical'}}, ''),
                  h('A', {
                    props: {type: 'primary', size: 'small'},
                    disabled: true,
                    style: {fontSize: '14px'},
                    on: {
                      click: () => {
                        this.editData(params);
                      }
                    }
                  }, '修改'),
                  h('Divider', {props: {type: 'vertical'}}, ''),
                  h('A', {
                    props: {type: 'primary', size: 'small'},
                    style: {fontSize: '14px', color: 'red'},
                    on: {
                      click: () => {
                        this.deleteData(params);
                      }
                    }
                  }, '删除')
                ]);
              } else {
                return h('div', [
                  h('A', {
                    props: {type: 'primary', size: 'small'},
                    style: {fontSize: '14px',},
                    on: {
                      click: () => {
                        this.viewData(params);
                      }
                    }
                  }, '详情'),
                  h('Divider', {props: {type: 'vertical'}}, ''),
                  h('A', {
                    props: {type: 'primary', size: 'small'},
                    style: {
						fontSize: '14px', 
						color: this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ||
					             this.currentUser.loginId === this.Common.admin ?'':'#c5c8ce',
					    pointerEvents: this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined ||
					             this.currentUser.loginId === this.Common.admin ? '' : 'none' 
					},
					on: {
					  click: () => {
					    this.editData(params);
					  }
					}
                  }, '修改'),
                  h('Divider', {props: {type: 'vertical'}}, ''),
                  h('A', {
                    props: {type: 'primary', size: 'small'},
                    style: {fontSize: '14px', color: '#c5c8ce'}
                  }, '删除')
                ]);
              }
            } else {
              return h('div', [
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px',},
                  on: {
                    click: () => {
                      this.viewData(params);
                    }
                  }
                }, '详情'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: '#c5c8ce'}
                }, '修改'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: '#c5c8ce'}
                }, '删除')
              ]);
            }
          }
        }
      ],
      ruleCustom: {
        companyId: [{required: true, message: '请填写企业名称', trigger: 'change'}],
        rptPeroid: [{required: true, message: '请填写月份', trigger: 'change', type: 'date'}],
        auditType: [{required: true, message: '请填写审核类别', trigger: 'change'}],
        status: [{required: true, message: '请选择完成情况', trigger: 'change'}],
        auditOrg: [{required: true, message: '请填写咨询机构名称', trigger: 'change'}],
        email: [{type: 'email', message: '邮箱格式错误', trigger: 'change'}],
        creatorPhone: [{
          pattern: /^((0\d{2,3}-\d{7,8})|(1[123456789]\d{9}))$/,
          required: true,
          message: '请填写填报人电话',
          trigger: 'change'
        }],
        phone: [{
          pattern: /^((0\d{2,3}-\d{7,8})|(1[123456789]\d{9}))$/,
          required: true,
          message: '请填写手机',
          trigger: 'change'
        }],
      },
      tableHeight: 10,
      dictMap: {},
      status: [
        {name: '开展中', value: '1'},
        {name: '编制报告中', value: '2'},
        {name: '送审中', value: '3'},
        {name: '验收中', value: '4'},
        {name: '已完成', value: '5'},
      ],
      statusMap: {},
      // api
      queryUrl: Api.queryPrdAuditForm,
      deleteUrl: Api.deletePrdAuditForm,
      exportUrl: Api.exportPrdAuditForm,
      bthDeleteUrl: Api.batchDeletePrdAuditForm,
      getUrl: Api.getPrdAuditForm,
      updateUrl: Api.updatePrdAuditForm,
      saveUrl: Api.savePrdAuditForm,
      options: {
        disabledDate(date) {
          return date && date.valueOf() >= new Date();
        }
      },
    }
  },
  async mounted() {
    this.setTableHeight();
    await this.$http.get(Api.queryDictBycode + "PRD-000001", {}).then((res) => {
      // 数据字典 list 转 map，方便调用
      this.dictMap = {
        'PRD-000001': this.dictListToMap(res.data.data['PRD-000001'])
      }
    }).catch(e => {
      this.$Message.error("数据字典获取失败")
    });
    this.statusParse();
    this.query();
  },
  methods: {
    ...pageCommonFunction,
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      if (this.dataToQuery.yearDate) {
        this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
      }

      if (this.dataToQuery.auditTypeArrays) {
        this.dataToQuery.dipTypes = this.arrayToInFormat(this.dataToQuery.auditTypeArrays)
      }
      this.queryAjax();
    },
    submit(name) {
      this.submitAjax(name);
    },

    statusParse() {
      this.status.map(item => {
        this.statusMap[item['value']] = item['name']
      });
    },
    onSelectAuditBeginDateRange() {
      if (data[0] === "" || data[1] === "") {
        this.dataToQuery.auditBeginDateStart = null;
        this.dataToQuery.auditBeginDateEnd = null;
      } else {
        this.dataToQuery.auditBeginDateStart = data[0];
        this.dataToQuery.auditBeginDateEnd = data[1];
      }
    },
    onSelectAuditFinishDateRange() {
      if (data[0] === "" || data[1] === "") {
        this.dataToQuery.auditFinishDateStart = null;
        this.dataToQuery.auditFinishDateEnd = null;
      } else {
        this.dataToQuery.auditFinishDateStart = data[0];
        this.dataToQuery.auditFinishDateEnd = data[1];
      }
    },
    createEmptyDataToAdd() {
      return {
        consultingFees: '',
        creatorPhone: this.currentUser.contactNumber
      }
    }
  },
  watch: {},

}
</script>

<style lang='css' scoped>

</style>
